<template>
   <lay-container fluid="true" style="padding: 10px;height: 100%;overflow-y: hidden">
    <div class="maintable-box"  >
      <div id="main" ref="mainRef" style="width:100%;height:calc(100% - 30px);"></div>
    </div>
  </lay-container>

</template>

<script lang="ts">
import { ref, watch,reactive,onMounted,h,shallowRef } from 'vue'
import { layer } from '@layui/layer-vue'
import MyHttp from "../../library/MyHttp";
import MyWin from "../../library/MyWin";
import MyPage from "../../library/MyPage";
import {DateUtil} from "../../library/DateUtil";
import {MySimpleExport,TableColumn} from "../../library/MySimpleExport";

  
import * as echarts from 'echarts';



export default {
 
  setup(prop:any, context:any) {

    const baseUrl="/commdevice";
    const baseQUrl=baseUrl+"/propvaluelist";
    const pageName="监测数据";

    const myWin=ref<any>(null);
   
    const qm=reactive({
      
      key:prop.id,
      dtb:DateUtil.todayStr(),
      dte:DateUtil.todayStr(),
      page: 1,
      pageSize: 10,
      sortFields:"id desc"
    });

    let xData=new Array();
    let yData=new Array();

    const initChart=()=>{
        let option = {
          
            calculable: true,
          dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100,
                },
            ],
            color: ['green','red'],
            title: {
                text: '本月火警趋势',
                textStyle: {
                    color: 'white',
                    fontSize: '14'
                },
                top: '0',
                show:false
            },
            tooltip: {
                trigger: 'axis',
                
                textStyle: {
                  color: '#000000',     // 文字的颜色
                
              } 
            },
            legend: {
                right: '20',
                top: '5',
                textStyle: {
                    color: '#65adeb'
                },
                selectedMode: true,
                data: ['上报警情'],
                show:false
            },
            textStyle: {
                color: 'rgba(236,249,255,0.7)'
            },
            grid: {
                left: '20',
                top: '30',
                right: '40',
                bottom: '30',
                containLabel: true
            },
            xAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#0ebdb2',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#65adeb',
                    },
                    formatter:(v:any)=>{
                      if(v.length<19){
                        return "";
                      }
                      var sv=v.slice(11,16); 
                      return  sv;
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: { show: false },
                boundaryGap: false,
                type: 'category',
                data: new Array(),
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: '#0ebdb2',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#65adeb',
                    },
                    formatter: '{value}',
                },
                axisTick: {            // 坐标轴小标记
                    show: true
                },
                splitLine: { show: true },
                splitNumber: 3,
                minInterval: 1,
                type: 'value'
            },
             
            series: [
                {
                    name: '趋势图',
                    type: 'line',
                    data:  new Array(),
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 10,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'blue'
                            }, {
                                offset: 1,
                                color: 'green'
                            }])
                        }
                    },
                 }
                //,
                // {
                //     name: '趋势图2',
                //     type: 'line',
                //     data:  new Array(),
                //     smooth: true,
                //     symbol: 'none',
                //     symbolSize: 10, 
                //     lineStyle: {
                //         type: 'dashed' // 设置为虚线
                //     }
                // }
            ]
        }; 
        var chartDom = mainRef.value;   
        if(!myChart.value){
          myChart.value = echarts.init(chartDom);
        }
       
  
        option.xAxis.data=xData;
        option.series[0].data=yData;
        myChart.value.setOption(option);
       
         
        
      }
 
    const query=async (q:any,pageIndex:number) =>{

      qm.key=q.key
      qm.dtb=q.dtb
      qm.dte=q.dte

       
      var r=await new MyHttp().list(baseQUrl,qm,
          {
          },
          []
      );
     
      let xData=new Array();
      let yData=new Array();
      let y2Data=new Array();
      for(let i=r.data.length-1;i>=0;i--){
          var data=r.data[i]
          xData.push(data.crtDt); 
          yData.push(data.fv); 
          y2Data.push(90); 
      } 
      let option = {
        xAxis:{
          data:xData
        },
        series: [
          {       
            data:yData 
          } 
          
        ]
      };
      myChart.value.setOption(option);

    }

    const mainRef = ref()
    let myChart=shallowRef();
    onMounted(() =>{
      myWin.value=new MyWin();
      initChart()
    });
    return {
      
      

      qm,
      query,

      

      myWin,
       mainRef,
       myChart,



    }
  }
}
</script>
<style  scoped >

.maintable-box{
  height: calc(100% -  10px);
}

</style>